<template>
	<view class="formContainer">
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="姓名" prop="name"><u-input v-model="form.name" border placeholder="请输入名称" /></u-form-item>
			<u-form-item label="客户名称" prop="name" style="position: relative;">
				<u-input v-model="form.name" border placeholder=" " @click="kehuName" />
				<u-icon name="arrow-right" class="icon" color="#dcdfe6" size="40"></u-icon>
			</u-form-item>
			<u-form-item label="手机"><u-input v-model="form.name" border placeholder="请输入手机" /></u-form-item>
			<u-form-item label="电话"><u-input v-model="form.name" border placeholder="请输入电话" /></u-form-item>
			<u-form-item label="邮箱"><u-input v-model="form.name" border placeholder="请输入邮箱" /></u-form-item>
			<u-form-item label="职务"><u-input v-model="form.name" border placeholder="请输入职务" /></u-form-item>
			<u-form-item label="是否关键决策人" style="position: relative;">
				<u-input v-model="form.name" border placeholder=" " @click="kehuName" />
				<u-icon name="arrow-right" class="icon" color="#dcdfe6" size="40"></u-icon>
			</u-form-item>
			<u-form-item label="地址"><u-input v-model="form.name" border placeholder="请输入地址" /></u-form-item>
			<u-form-item label="下次联系时间">
				<u-input v-model="form.name" border placeholder="请输入下次联系时间"  @click="openDatetimePicker"/>
				<simple-datetime-picker ref="myPicker" @submit="handleSubmit" :start-year="2000" :end-year="2030" color="#366DF6"></simple-datetime-picker>
			</u-form-item>
			<u-form-item label="备注">
				<u-input v-model="form.name" type="textarea" border height="120" auto-height placeholder="请输入备注"/>
				</u-form-item>
			<u-form-item label="性别" style="position: relative;">
				<u-input v-model="form.name" border placeholder=" " @click="kehuName" />
				<u-icon name="arrow-right" class="icon" color="#dcdfe6" size="40"></u-icon>
			</u-form-item>
		</u-form>
		<!-- <u-button @click="submit">提交</u-button> -->
		<u-button type="primary" @click="submit">保 存</u-button>
	</view>
</template>

<script>
import simpleDatetimePicker from '@buuug7/uniapp-components/lib/simple-datetime-picker';

export default {
	data() {
		return {
			birthday: '',
			show: false,
			mode: 'date',
			form: {
				name: '',
				intro: ''
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				intro: [
					{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}
				]
			}
		};
	},
	components: {
		simpleDatetimePicker
	},
	methods: {
		//提交验证
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		},
		kehuName() {
			console.log(22);
		},
		// 打开picker
		openDatetimePicker() {
			this.$refs.myPicker.show();
		},

		// 关闭picker
		closeDatetimePicker() {
			this.$refs.myPicker.hide();
		},

		handleSubmit(e) {
			console.log(e); // {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
			this.birthday = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			console.log(this.birthday)
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>
<style lang="scss">
.formContainer {
	padding: 0 20rpx;
	.icon {
		position: absolute;
		right: 10rpx;
		top: 120rpx;
		z-index: 100;
	}
}
</style>
